<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    width: 500px;
    background-color: orange;
    display: flex;
    /* 第一种方法 */
    /* justify-content: space-between; */

    justify-content: space-between;
    flex-wrap: wrap;
}
.item{
    width: 110px;
    height: 140px;
    /* 第一种方法 */
    /* margin-right: 20px; */
}
/*  <!-- 第二种方式 --> */
.container span{
    width: 110px;
}
/* 第一种方法 */
/* .item:nth-child(4n){
    margin-right: 0;
} */

</style>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <!-- 第二种方式 加上列数-2个span-->
        <!-- <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span> -->
    </div>
    <script src="./itemRandomColor.js"></script>
</body>
</html>